<template>
	<view class="wrap">
		<u-tabs :list="tabList" :is-scroll="false" :current="current" @change="changeTab"></u-tabs>
		<view v-if="current == 0">
			<view class="statistics-container">
				<view class="statistics-info">15</view>
				<view class="statistics-text">累计打卡天数</view>
			</view>
			<uni-calendar class="uni-calendar--hook" :selected="selected" :showMonth="true" @change="changeCalendar" @monthSwitch="monthSwitch"/>	
			<u-button class="clockIn-button" type="primary" shape="circle">打卡</u-button>
		</view>
		<view v-if="current == 1">
			<view class="timetable__header">
				<view class="timetable__header-btn-box" @click.stop="pre">
					<view class="timetable__header-btn timetable--left"></view>
				</view>
				<picker :range="timetable.range" @change="pickerChange">
					<text class="timetable__header-text">第 {{timetable.index + 1}} 周</text>
				</picker>
				<view class="timetable__header-btn-box" @click.stop="next">
					<view class="timetable__header-btn timetable--right"></view>
				</view>
			</view>
			<view class="timetable__box">
				<view class="timetable__weeks">
					<view class="timetable__weeks-day"></view>
					<view class="timetable__weeks-day">
						<text class="timetable__weeks-week-text">周一</text>
						<text class="timetable__weeks-day-text">05-26</text>
					</view>
					<view class="timetable__weeks-day">
						<text class="timetable__weeks-week-text">周二</text>
						<text class="timetable__weeks-day-text">05-27</text>
					</view>
					<view class="timetable__weeks-day">
						<text class="timetable__weeks-week-text">周三</text>
						<text class="timetable__weeks-day-text">05-28</text>
					</view>
					<view class="timetable__weeks-day">
						<text class="timetable__weeks-week-text">周四</text>
						<text class="timetable__weeks-day-text">05-29</text>
					</view>
					<view class="timetable__weeks-day">
						<text class="timetable__weeks-week-text">周五</text>
						<text class="timetable__weeks-day-text">05-30</text>
					</view>
					<view class="timetable__weeks-day">
						<text class="timetable__weeks-week-text">周六</text>
						<text class="timetable__weeks-day-text">05-31</text>
					</view>
					<view class="timetable__weeks-day">
						<text class="timetable__weeks-week-text">周日</text>
						<text class="timetable__weeks-day-text">06-01</text>
					</view>
<!-- 					<u-grid :col="8" :border="false" class="timetable__weeks-grid">
						<u-grid-item class="timetable__weeks-grid-item"></u-grid-item>
						<u-grid-item class="timetable__weeks-grid-item">
							<view class="timetable__weeks-day">
								<text class="timetable__weeks-week-text">周一</text>
								<text class="timetable__weeks-day-text">05-26</text>
							</view>
						</u-grid-item>
						<u-grid-item class="timetable__weeks-grid-item">
							<view class="timetable__weeks-day">
								<text class="timetable__weeks-week-text">周二</text>
								<text class="timetable__weeks-day-text">05-27</text>
							</view>
						</u-grid-item>
						<u-grid-item class="timetable__weeks-grid-item">
							<view class="timetable__weeks-day">
								<text class="timetable__weeks-week-text">周三</text>
								<text class="timetable__weeks-day-text">05-28</text>
							</view>
						</u-grid-item>
						<u-grid-item class="timetable__weeks-grid-item">
							<view class="timetable__weeks-day">
								<text class="timetable__weeks-week-text">周四</text>
								<text class="timetable__weeks-day-text">05-29</text>
							</view>
						</u-grid-item>
						<u-grid-item class="timetable__weeks-grid-item">
							<view class="timetable__weeks-day">
								<text class="timetable__weeks-week-text">周五</text>
								<text class="timetable__weeks-day-text">05-30</text>
							</view>
						</u-grid-item>
						<u-grid-item class="timetable__weeks-grid-item">
							<view class="timetable__weeks-day">
								<text class="timetable__weeks-week-text">周六</text>
								<text class="timetable__weeks-day-text">05-31</text>
							</view>
						</u-grid-item>
						<u-grid-item class="timetable__weeks-grid-item">
							<view class="timetable__weeks-day">
								<text class="timetable__weeks-week-text">周日</text>
								<text class="timetable__weeks-day-text">06-01</text>
							</view>
						</u-grid-item>
					</u-grid> -->
				</view>
				<view class="timetable__course">
					<view class="timetable__course-nums">
						<view v-for="index in 12" class="timetable__course-num">
							{{ index > 9 ? index : '0' + index}}
						</view>
					</view>
					<view class="timetable__course-list"> 
						<view v-for="(item,index) in courseList" :key="index" class="timetable__course-item" :style="{ height: item.sectionCount * 80 + 'rpx', top: (item.section - 1) * 80 + 'rpx', left: (item.week - 1) * (windowWidth - windowWidth  / 8) / 7 + 'px'}">
							<view class="timetable__course-item-content" :style="{ backgroundColor: item.color }">
								{{item.name}}{{item.address}}
							</view>	
						</view>
					</view> 
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			tabList: [{
				name: '打卡'
			}, {
				name: '上班时间表',
			}],
			current: 0,
			selected: [{
				date: '2024-8-01',
				info: '已打卡'
			},{
				date: '2024-8-02',
				info: '已打卡'
			},{
				date: '2024-8-04',
				info: '已打卡'
			},{
				date: '2024-8-05',
				info: '已打卡'
			}],
			timetable: {
				index: 0,
				range: ['一', '二', '三', '四', '五', '六', '七', '八', '九', '十', '十一', '十二', '十三', '十四', '十五', '十六', '十七', '十八', '十九', '二十', '二十一']
			},
			courseList: [
				{
					name: '上班',
					week: 1,
					section: 1,
					sectionCount: 2,
					address: ' 08:00 - 10:00 ',
					color: '#4b86f6',
				},
				{
					name: '上班',
					week: 2,
					section: 3,
					sectionCount: 2,
					address: '10:00 - 12:00',
					color: '#58ca93',
				},
				{
					name: '上班',
					week: 5,
					section: 1,
					sectionCount: 2,
					address: ' 08:00 - 10:00 ',
					color: '#5fceb3',
				},
				{
					name: '上班',
					week: 3,
					section: 1,
					sectionCount: 2,
					address: ' 08:00 - 10:00 ',
					color: '#f2a953',
				},
				{
					name: '上班',
					week: 3,
					section: 5,
					sectionCount: 2,
					address: ' 12:00 - 14:00 ',
					color: '#F35643',
				},
				{
					name: '上班',
					week: 4,
					section: 9,
					sectionCount: 3,
					address: ' 17:00 - 20:00 ',
					color: '#84acf7',
				},
				{
					name: '上班',
					week: 5,
					section: 5,
					sectionCount: 2,
					address: ' 12:00 - 14:00 ',
					color: '#eb516c',
				}
			],
			windowWidth: 0,
		}
	},
	onLoad() {
		/**
		 * 获取可使用窗口宽度
		 */
		this.windowWidth = uni.getStorageSync('windowWidth');
		console.log("可使用窗口宽度:" + this.windowWidth);
		// this.windowWidth = getApp().globalData.windowWidth;
		// uni.getSystemInfo({
		// 	success: (e) => {
		// 		this.windowWidth = e.windowWidth;
		// 		console.log("可使用窗口宽度:" + this.windowWidth);
		// 	},
		// });
	},
	methods: {
		/**
		 * 	切换tab标签
		 */
		changeTab(index) {
			this.current = index;
		},
		/**
		 * 切换日历
		 */
		changeCalendar(e) {
			console.log('change 返回:', e)
			// 模拟动态打卡
			if (this.info.selected.length > 5) return
			this.info.selected.push({
				date: e.fulldate,
				info: '打卡'
			})
		},
		monthSwitch(e) {
			console.log('monthSwitchs 返回:', e)
		},
		pickerChange: function(e) {
			console.log('picker发送选择改变，携带值为', e.detail.value);
			this.timetable.index = e.detail.value;
		},
		/**
		 * @description 上一周
		 */
		pre: function(e) {
			console.log("当前页:" + (this.timetable.index + 1));
			if (this.timetable.index + 1 > 1) {
				this.timetable.index = this.timetable.index - 1;
			} else if (this.timetable.index + 1 == 1) {
				this.timetable.index = 0;
			}
			console.log("目的页:" + (this.timetable.index + 1));
			// 刷新逻辑
		},
		/**
		 * @description 下一周
		 */
		next: function(e) {
			console.log("当前页:" + (this.timetable.index + 1));
			if (this.timetable.index + 1 < 21) {
				this.timetable.index = this.timetable.index + 1;
			} else if (this.timetable.index + 1 == 21) {
				this.timetable.index = 20;
			}
			console.log("目的页:" + (this.timetable.index + 1));
		}
	}
}
</script>

<style lang="scss" scoped>
@import 'index.scss';
.statistics-container {
	display: flex;
	flex-direction: column;
	padding: 60rpx;
	background-color: #5b95ff;
	height: 320rpx;
		
	.statistics-info {
		display: flex;
		justify-content: center;
		color: #fff;
		font-size: 80rpx;
	}
	
	.statistics-text {
		display: flex;
		justify-content: center;
		color: #fff;
	}	
	
	.clockIn-container{
		display: flex;
		justify-content: center;
	}
}

.uni-calendar--hook {
	border-radius: 50px;
	margin: 30rpx;
	border-radius: 50px;
	box-shadow:  20px 20px 40px #b3b3b3;
	position: absolute;
	top: 280rpx;
}

.clockIn-button {
	top: 730rpx;
	width: 650rpx;
	font-weight: 600;
	font-size: 35rpx;
	background-color: #5b95ff;
	margin-top: 50rpx;
}

.picker-view {
	width: 750rpx;
	height: 600rpx;
	margin-top: 20rpx;
}

.picker-item {
	line-height: 100rpx;
	text-align: center;
}

.timetable__header {
	position: relative;
	/* #ifndef APP-NVUE */
	display: flex;
	/* #endif */
	flex-direction: row;
	justify-content: center;
	align-items: center;
	height: 50px;
	border-bottom-color: #EDEDED;
	border-bottom-style: solid;
	border-bottom-width: 1px;
}

.timetable__header-btn-box {
	/* #ifndef APP-NVUE */
	display: flex;
	/* #endif */
	flex-direction: row;
	align-items: center;
	justify-content: center;
	width: 50px;
	height: 50px;
}

.timetable__header-btn {
	width: 10px;
	height: 10px;
	border-left-color: #808080;
	border-left-style: solid;
	border-left-width: 2px;
	border-top-color: #555555;
	border-top-style: solid;
	border-top-width: 2px;
}

.timetable--left {
	transform: rotate(-45deg);
}

.timetable--right {
	transform: rotate(135deg);
}

.timetable__header-text {
	text-align: center;
	width: 100px;
	font-size: 14px;
	color: #333;
}

.timetable__weeks {
	display: flex;
}

// .timetable__months {
// 	width: 50rpx;
// 	display: flex;
// 	flex-direction: column;
// 	justify-content: center;
// 	align-items: center;
// }

.timetable__weeks-grid {
}

.timetable__weeks-grid-item { 
}

.u-grid-item-box {
}

.timetable__weeks-day {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	height: 100rpx;
	width: calc(100% / 8);
}

.timetable__weeks-week-text {
	font-size: 14px;
	color: #333;
}

.timetable__weeks-day-text {
	font-size: 10px;
	color: #999;
}

.timetable__course {
	width: 100%;
	display: flex;
}

.timetable__course-items {
	width: 100%;
}

.timetable__course-nums {
	width: calc(100% / 8);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.timetable__course-num {
	height: 80rpx;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	font-size: 14px;
	color: #333;
}

.timetable__course-list {
	height: 100%;
	width: calc(100% - 100% / 8);
	position: relative;
}

.timetable__course-item {
	position: absolute;
	width: calc(100% / 7);
	padding: 5rpx;
}

.timetable__course-item-content {
	width: 100%;
	height: 100%;
	font-weight: 500;
	font-size: 12px;
	color: #fff;
	display: flex;
	justify-content: center;
	border-radius: 12rpx;
	padding: 8rpx;
	text-align: center;
}
</style>